<template>
  <uni-popup ref="popup" type="bottom">
    <!-- <AddressPanel v-if="popupName === 'address'" @close="popup?.close()" /> -->
    <view class="address-panel">
      <!-- 关闭按钮 -->
      <text class="gender_close icon-close" @tap="popup?.close()"></text>
      <!-- 标题 -->
      <view class="gender_title">Pay with</view>
      <!-- 内容 -->
      <view class="gender_content">
        <view class="item" @tap="genderChange('Alipay')">
          <view class="user">
            <image src="/static/images/detail/zhifubao@2x.png" mode="aspectFit" />
            <text class=""> Alipay </text>
          </view>
          <text :class="['icon', iconChecked === 'Alipay' ? 'icon-checked' : 'icon-ring']"></text>
        </view>
        <view class="item" @tap="genderChange('WeChat')">
          <view class="user">
            <image src="/static/images/detail/weixin@2x.png" mode="aspectFit" />
            <text class=""> WeChat Pay </text>
          </view>
          <text :class="['icon', iconChecked === 'WeChat' ? 'icon-checked' : 'icon-ring']"></text>
        </view>
        <view class="item" @tap="genderChange('Credit')">
          <view class="user">
            <image src="/static/images/detail/yinhangka@2x.png" mode="aspectFit" />
            <text class=""> Credit or debit card </text>
          </view>
          <text :class="['icon', iconChecked === 'Credit' ? 'icon-checked' : 'icon-ring']"></text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { ref, computed, defineExpose } from 'vue'
// 获取页面参数
const query = defineProps<{
  id: string
}>()
const iconChecked = ref<'Alipay' | 'WeChat' | 'Credit'>('Alipay')
// uni-ui 弹出层组件 ref
const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()

// 弹出层条件渲染
const openPopup = () => {
  // 修改弹出层名称
  popup.value?.open()
}
// 暴露方法和属性给父组件
defineExpose({ openPopup })
const emit = defineEmits(['getValue'])
const genderChange = (name: typeof iconChecked.value) => {
  iconChecked.value = name
  emit('getValue', name)
  popup.value?.close!()
}
</script>

<style lang="scss">
.address-panel {
  padding: 32rpx 36rpx 50rpx;
  border-radius: 40rpx 40rpx 0 0;
  position: relative;
  background-color: #fff;
}

.gender_title {
  font-weight: 600;
  font-size: 36rpx;
  color: #000000;
  line-height: 50rpx;
  text-align: center;
  padding-bottom: 36rpx;
}

.gender_close {
  position: absolute;
  right: 38rpx;
  top: 38rpx;
  font-size: 17px;
  font-weight: 600;
  opacity: 0.3;
}

.gender_content {
  .item {
    padding: 36rpx 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid rgb(189, 191, 194, 0.3);

    &:last-child {
      border-bottom: none;
    }
  }

  .icon {
    color: #999;
    font-size: 36rpx;
  }

  .icon-checked {
    color: rgb(96, 94, 240);
  }

  .icon-ring {
    color: transparent;
  }

  .user {
    font-size: 30rpx;
    color: #000000;
    line-height: 42rpx;
    display: flex;
    align-items: center;
    gap: 18rpx;

    image {
      width: 72rpx;
      height: 72rpx;
    }
  }
}
</style>
